<script lang="ts">
import agentLogo from '~/assets/imgs/agentLogo.svg';
import LogoLg from '~/assets/imgs/logo-lg.svg';
import LogoSm from '~/assets/imgs/logo-sm.svg';
import InvitedSpinTips from '~/components-business/bonuses/InvitedSpinTips.vue';
import Tips15U from '~/components-business/bonuses/Tips15U.vue';
import { useUserStore } from '~/stores';
import { useLayout } from '../useLayout';
import Bonuses from './Bonuses.vue';
import Sign from './Sign.vue';
import User from './user/User.vue';
import Wallet from './wallet/Wallet.vue';
</script>

<script setup lang="ts">
const { asideMenu, asideContent } = useLayout();
const authed = useAuthed();

const userStore = useUserStore();
const noticeCount = computed(() => userStore.userInfo?.user_notice?.notice_count ?? 0);

function notify() {
  userStore.userInfoQry.refetch();
  asideContent.toggle();
}
</script>

<template>
  <div class="h-13 flex items-center gap-2 bg-sys-layer-c px-3 py-3" u:tabletl="px-4 h-16">
    <div
      class="hidden h-full w-14 cursor-pointer items-center justify-center text-7 text-sys-text-body -ml-3"
      u:tabletl="-ml-4 flex"
      @click="asideMenu.toggle()"
    >
      <i :class="asideMenu.opened ? 'i-ic:round-menu-open' : 'i-ic:round-menu'" />
    </div>
    <RouterLink
      v-if="$store.app.isAgent !== undefined"
      class="mr-2 block text-white font-extrabold leading-none no-underline lt-tablet:mr-0 tabletl:-ml-2"
      :to="{ name: RN.INDEX }"
    >
      <img v-if="$store.app.isAgent" class="h-7 min-w-13 w-auto lt-tablet:h-4" :src="agentLogo">
      <img v-else class="h-8 w-auto" :src="$bp.tablet ? LogoLg : LogoSm">
    </RouterLink>

    <div class="relative">
      <!-- 左边按钮 -->
      <Bonuses class="h-36px" />
      <Tips15U class="absolute top-15 lt-tabletl:left--3" />
      <InvitedSpinTips class="absolute top-15 lt-tabletl:left--3" />
    </div>

    <div v-if="$bp.mobile" class="common-item" @click="globalPopups.searchPopup.open?.()">
      <i class="i-ph:magnifying-glass-bold" />
    </div>

    <div class="flex-1" />

    <!-- 右边按钮 -->
    <Wallet v-if="authed" />
    <User v-if="authed" class="flex-none" />
    <Sign v-else />
    <ABadge
      v-if="$bp.tablet && authed"
      :count="noticeCount" size="small" :numberStyle="{ color: '#FFF', fontWeight: '500' }"
    >
      <div class="common-item" @click="notify()">
        <i class="i-local:notice?mask text-4" />
      </div>
    </ABadge>
    <!-- <LangSelect v-if="$bp.ltTabletl" class="common-item !lt-mobile:hidden" /> -->
  </div>
</template>

<style lang="scss" scoped>
.common-item {
  --uno: 'min-w-9 h-9 flex-center rounded-2 cursor-pointer bg-sys-layer-e flex-none';
}
</style>
